<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Milliseconds</title>
    <meta charset="utf-8">
    <meta name="description" content="TimelineJS Embed">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-touch-fullscreen" content="yes">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <!-- CSS-->
    <link rel="stylesheet" href="../css/timeline.css?v1">
    <!--FONT-->
    <link rel="stylesheet" href="../css/fonts/font.default.css?v1">
    <!-- Style-->
    <style>
      html, body {
      	height:100%;
      	width:100%;
      	padding: 0px;
      	margin: 0px;
      }
      #input {
      	height: 40px;
      	background-color:#CCC;
      }
      #url {
      	margin:10px;
      }
      #timeline {
      	height: 100%;
      }
      
    </style>
    <!-- HTML5 shim, for IE6-8 support of HTML elements-->
    <!--if lt IE 9
    script(src='https://html5shim.googlecode.com/svn/trunk/html5.js')
    
    -->
  </head>
  <body>
    <div id="input">
      <input id="url" placeholder="Enter a google spreadsheet URL" size="100" type="text">
      <button id="preview" type="button">Go</button>
    </div>
    <div id="timeline"></div>
    <!-- JavaScript-->
    <script src="../js/timeline.js"></script>
    <script>
      var timeline = null;
      var button = document.getElementById('preview');
      button.addEventListener('click',function(){
      	new_timeline(document.getElementById('url').value);
      });
      
      document.getElementById('url').addEventListener('keyup',function(evt) {
      	if (evt.keyCode == 13) {
      		new_timeline(document.getElementById('url').value);
      	}
      });
      
      function new_timeline(url) {
      	timeline = null; // TODO: actively 'destroy' an existing timeline?
      	var json = TL.ConfigFactory.fromGoogle(url);
      
      	window.factory_json = json;
      	
      	document.getElementById('input').style.height = "40px"
      	document.getElementById('timeline').style.height = (window.innerHeight - 40 + "px");
      	
      	timeline = new TL.Timeline('timeline', new TL.TimelineConfig(json), {
      		debug:true
      	});
        
      	
      	window.onresize = function(event) {
      		console.log("resize")
      		document.getElementById('input').style.height = "30px"
      		document.getElementById('timeline').style.height = (window.innerHeight - 30 + "px");
      		timeline.updateDisplay();
      	}
      }
      
      function getQueryParams(qs) {
      	qs = qs.split("+").join(" ");
      
      	var params = {}, tokens,
      	re = /[?&]?([^=]+)=([^&]*)/g;
      
      	while (tokens = re.exec(qs)) {
      		params[decodeURIComponent(tokens[1])]
      		= decodeURIComponent(tokens[2]);
      	}
      
      	return params;
      }
      
      var qs = getQueryParams(window.location.search);
      if (qs.key) {
      	new_timeline(qs.key);
      }
    </script>
  </body>
</html>